<template>
  <div class="quality-box">
    <div class="quality-content" flex="dir:top box:justify">
      <el-select class="w-100" v-model="equipmentValue" @change="chooseEquipment" placeholder="请选择">
        <el-option
                v-for="item in equipmentOptions"
                :key="item.value"
                :value="item.value">
        </el-option>
      </el-select>
      <div id="main-quality"></div>
      <div>
        <div class="quality-legend">
          <div v-for="(item, i) in qualityList" :key="i"><span
                  :style="{background: item.color}"></span><i>{{ item.name}}</i><b>{{item.num + item.unit}}</b></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'eQuality',
  data () {
    return {
      equipmentList: [],
      equipmentOptions: [], // 初始化select格式
      equipmentValue: '',
      qualityData: [0, 0, 0, 0, 0, 0], // 获取到的环保质量渲染echarts的数据
      qualityList: [
        { name: '温度', num: 0, unit: '°C', color: '#BAD87D' },
        { name: '湿度', num: 0, unit: '%RM', color: '#BD10E0' },
        { name: '甲醛', num: 0, unit: 'ppm', color: '#F6511D' },
        { name: '二氧化碳', num: 0, unit: 'ppm', color: '#50E3C2' },
        { name: 'pm2.5', num: 0, unit: 'ug/m3', color: '#8B572A' },
        { name: 'tvoc', num: 0, unit: 'ppm', color: '#4A90E2' }
      ], // 获取到的环保质量分类列表
      chart: ''
    }
  },
  props: {
    option: {
      type: Object,
      default () {
        return {
          legend: {
            bottom: 5,
            data: ['上海'],
            itemGap: 20,
            textStyle: {
              color: '#fff',
              fontSize: 12
            },
            selectedMode: 'single'
          },
          radar: {
            center: ['50%', '50%'], // 控制雷达图图例位置
            indicator: [
              { name: '温度', max: 80 },
              { name: '湿度', max: 100 },
              { name: '甲醛', max: 0.24 },
              { name: '二氧化碳', max: 1000 },
              { name: 'pm2.5', max: 1000 },
              { name: 'tvoc', max: 4 }
            ],
            radius: 50, // 控制雷达图图例大小
            splitNumber: 3,
            name: {
              textStyle: {
                color: '#9FACC3'
              }
            },
            splitLine: {
              lineStyle: {
                color: [
                  '#50E3C2'
                ].reverse()
              }
            },
            splitArea: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#50E3C2'
              }
            }
          },
          series: [
            {
              type: 'radar',
              lineStyle: {
                normal: {
                  width: 1,
                  opacity: 0.5
                }
              },
              data: [
                {
                  value: []
                }
              ],
              symbol: 'circle',
              symbolSize: 6,
              itemStyle: {
                normal: {
                  color: '#50E3C2'
                }
              },
              areaStyle: {
                normal: {
                  opacity: 0.7,
                  backgroundColor: '#50E3C2'
                }
              }
            }

          ]
        }
      }
    }
  },
  mounted () {
    this.initData()
  },
  methods: {
    // 初始化环保质量参数
    initData: function () {
      let url = this.$base.getUrl('rosAirQualityInfoList')
      let params = {
        url: url,
        data: {
          'deptId': this.$route.params.deptId
        }
      }

      this.$store.dispatch('postForm', params).then((res) => {
        const { result } = res
        this.equipmentList = result
        const equipmentOptions = []
        result.map(item => {
          equipmentOptions.push({
            value: item.equipmentNo
          })
        })
        this.equipmentOptions = equipmentOptions
        this.chooseEquipment(result[0].equipmentNo)
      })
    },
    chooseEquipment: function (value) {
      const arr = this.equipmentList.filter(item => item.equipmentNo === value)
      if (!arr.length) return
      const result = arr[0] || {}
      const { temperature, humidity, formaldehyde, co2, pm25, tvoc, equipmentNo } = result
      this.equipmentValue = equipmentNo
      this.qualityData = [temperature, humidity, formaldehyde, co2, pm25, tvoc]
      this.qualityList.map((item, index) => {
        item.num = this.qualityData[index]
      })
      this.getChart()
    },
    selectEquipment: function (val) {
      console.log(val)
    },
    // 初始化图例
    getChart () {
      var temp = this.option
      temp.series[0].data[0].value = this.qualityData
      this.chart = this.$echarts.init(document.getElementById('main-quality'))
      this.chart.setOption(this.option)
    }
  }
}
</script>

<style scoped lang="less">
  .quality-box {
    width: 100%;
    height: 100%;
    margin-bottom: 10px;
  }

  .quality-content {
    width: 100%;
    height: 100%;
    background: rgba(43, 54, 72, 0.95);
    position: relative;
    padding: 13px;
    box-sizing: border-box;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
  }

  .quality-content .title {
    position: relative;
    top: 8px;
    left: 10px;
    font-size: 12px;
    font-weight: 600;
    color: #FFFFFF;
  }

  .quality-content .select {
    width: 100px;
    position: absolute;
    top: 4%;
    left: 53%;
    right: 10%;
  }

  .form-control {
    width: 100px;
    height: 30px;
    text-indent: 10px;
    background: rgba(0, 0, 0, 0.20);
    border-radius: 4px;
    border: none;
    font-size: 12px;
    color: #9FACC3;
  }

  #main-quality {
    width: 100%;
  }

  .quality-legend {
    width: 100%;
    left: 15px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
  }

  .quality-legend i {
    font-style: normal;
    /*width: 100px;*/
    color: #9FACC3;
    font-size: 12px;
  }

  .quality-legend b {
    float: right;
    font-size: 14px;
    color: #50E3C2;
    font-weight: normal;
  }

  .quality-legend span {
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;
    width: 8px;
    height: 8px;
    display: inline-block;
    /*float: left;*/
    margin-right: 3px;
  }

  .quality-legend div {
    width: 50%;
    line-height: 20px;
    color: #fff;
    box-sizing: border-box;
    &:nth-child(2n+1) {
      padding-right: 10px;
    }
  }
</style>
